Redesign language chooser and add light/dark code theme#19940
Conversation
Convert the type="language" pulumi-chooser into a bordered card: a gray top toolbar showing the active language's colored logo + full name on the left and full-height underline-style abbreviation tabs (TS, PY, GO, …) on the right, with the slotted code/prose below. Scoped to non-headless language choosers; other chooser types and inline/headless choosers are unchanged. - chooser.tsx: add per-language `logo`, render the toolbar + abbreviation tabs for language, helper for tab labels; extend e2e coverage. - _chooser.scss: card + toolbar styling via semantic --docs-* tokens (dark mode for free); collapse code-unit margins at choosable edges (.highlight / .example-program) and drop top margin after a p/ul/ol; flush example-program panels. - _docs-theme.scss: dark overrides for the new toolbar tabs (the unlayered `*` border reset would otherwise win) and scope note status-icon color to .icon-and-line so copy buttons aren't tinted. - _copy-button.scss: match the code block background with a gray outline. - _notes.scss: scope note icon color/size to .icon-and-line; scope the last-child padding reset to content blocks so copy buttons aren't hit. - _code.scss: example-program footer uses the code background, fix the GitHub tooltip positioning and shrink its icon. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Add Min Light code theme for /docs light mode (theme/src/scss/docs/_code-light.scss), scoped to html:not([data-theme="dark"]) body.section-docs; Min Dark stays the default everywhere else and in docs dark mode. Per the Pulumi brand "Code highlighting" guideline (Min Theme on Violet 50 / Violet 950). - Consolidate the code copy button into one predictable ghost-chip style and drop the obsolete dark-mode violet-950 override. - Position the copy-button and example-program "View full example" tooltips to the left of their trigger instead of above. - Replace the C# language logo with the canonical purple hex mark. - Make the chooser language logos dark-mode aware (optional logoOnDark + .docs-logo-light/.docs-logo-dark swap); use the existing matched dark YAML asset and the mark-only Java cup logo. - Add an optional Preview badge next to the active label in the chooser toolbar. - Chooser plain tabs: use --docs-surface (inactive) / --docs-border (hover) borders and service-black active label text. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The chooser renders options in the declaration order of the supported* arrays (mapOptions filters them, preserving source order), not the order passed in the options attribute. Correct both new assertions to expect the actual render order. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Your site preview for commit 4ff5aab is ready! 🎉 http://www-testing-pulumi-docs-origin-pr-19940-4ff5aab1.s3-website.us-west-2.amazonaws.com |
Pre-merge Review — Last updated 2026-06-29T19:48:31ZTip Summary: This PR redesigns the docs language chooser and adds a light/dark code-highlighting theme. It restyles the chooser into a bordered card with a logo-labeled toolbar and abbreviated language tabs (a Stencil component change plus accompanying SCSS), adds a Min Light Chroma palette gated to Review confidence:
Investigation log
🔍 Verification trail20 claims extracted · 0 verified · 0 unverifiable · 0 contradicted
🚨 Outstanding in this PRNo outstanding findings in this PR.
|
Lighthouse Performance ReportCommit: 4ff5aab | Metric definitions
|
- Add a `position="left"` prop to pulumi-tooltip (placement lives in the component + _tooltip.scss); opt in from the copy button and example-program footer, removing the per-consumer positioning overrides. - Source all chooser language logos from /images/docs/icons/languages for consistency (copy in typescript/javascript/csharp/fsharp/visualbasic/opa; switch python/go); keep the C# hex distinct from the .NET mark. - Trim overly verbose comments across the branch. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
CamSoper
left a comment
There was a problem hiding this comment.
I love it! You're a rockstar, Jeff.
- Add "hcl" to the chooser's LanguageKey and supportedLanguages (marked preview: true), with a compact braces icon (hcl-color-32-32.svg); keep the full "HCL" wordmark as hcl-wordmark-color-32-32.svg. - Show the Preview badge only on the toolbar label for language choosers, not on the tabs (other chooser types keep the tab badge). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
cnunciato
left a comment
There was a problem hiding this comment.
Ok so first off, this looks fantastic. I love it. ✨
Still poking, but wanted to get you a first pass to work with some of the more noticeable things I've seen so far.
-
We use choosers to toggle blocks of content on the page, which currently produces what looks like an empty container (new vs. current):
-
Variations on the chooser look different. Should we change these too, or leave them the same?
-
Many have extra padding — might be a quirk of Hugo rendering?
-
I assume we're pulling this from the extension, but it'd be great to have the label here be
C#rather thanCS:
-
The wrapping is a bit awkward on mobile. Should we maybe hide the full name and the icon below a certain width? 🤔
…g fix - Standalone (self-closing) language choosers render as a toolbar strip instead of an empty card; generic (os/persona/etc.) choosers restyled to match (surface bg, small tabs, violet active underline) - Code-only choosers run their single code block flush to the card edges - C# and F# tabs use their proper names via a tabLabel override - Mobile: toolbar label hidden, tab row scrolls horizontally - Fix the chooser global-reset bug: a chooser missing the preferred option no longer dispatches a page-wide language reset (which made YAML unselectable on pages like /docs/iac/concepts/stacks/). It now shows a display-only fallback, keeps following the store, and adopts the sibling choosables it controls so their content stays visible - Wrap the Stack README chooser in stacks.md so it renders as a card Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…9928-update-language-chooser
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
@cnunciato Good catches and feedback, thank you!
Unrelated update: I changed the info notes back to blue instead of violet - since the code background is violet in light mode now they were really blending in with eachother too much. Also bonus: ran across and fixed a bug where tabs weren't working when there were mixed chooser options (clicking YAML here https://www.pulumi.com/docs/iac/concepts/stacks/#outputs doesn't work.) |
cnunciato
left a comment
There was a problem hiding this comment.
Looks great! Will keep an eye out for any additional issues, but so far, everything looks solid. Well done!
* Port the docs language-chooser redesign to the registry Ports pulumi/docs#19940: language choosers now render as a card with a gray toolbar (active language logo + name on the left, compact file-extension tabs on the right), and a chooser missing the user's preferred language falls back display-only instead of clobbering the page-wide selection. Also syncs the earlier docs chooser changes (OPA, OCI, pythontoolchain, subscribeToStore flash fix) to eliminate theme divergence. Additionally, per follow-up direction: - Adopt the Min Light code theme site-wide (docs/_code-light.scss, imported unlayered; the registry has no dark-mode toggle) - Adopt the _notes.scss changes (info notes violet -> blue, icon scoping fixes) - Copy button becomes a ghost button with the tooltip on the left - New language icons and the official purple C# logo Registry-specific fixes needed along the way: - Guard the GrowthBook/analytics init in util.ts so pages without the injected globals (e.g. component test pages) don't crash; this also fixes five pre-existing e2e suite failures - Add pythontoolchain to normalizeState in store/index.ts - Bump puppeteer to ^24 (required by Stencil 4.43 to run e2e tests) - Fix the upstream chooser toolbar e2e test by initializing the store via pulumi-root (it fails as-written in pulumi/docs too) - Hide the .docs-logo-dark toolbar logo variant (no dark theme here) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * Make the language chooser code block flush with its toolbar In the flush "code-only" language chooser (e.g. the Example block on a package overview page), a 16px gap appeared between the gray toolbar and the code panel. The card's base rule zeroed only the pre's margin-bottom (mb-0); the registry's base pre also carries a top margin, which leaked past the toolbar. Zero both (my-0) so the .highlight wrapper remains the sole source of vertical spacing, as intended — matching docs, where the base pre has no top margin to begin with. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * Make standalone chooser code blocks sit flush with their toolbar On API-doc pages the language chooser is emitted in its standalone form (a self-closing <pulumi-chooser> with the code choosables as siblings on the page, so one chooser can drive a whole section). That renders the chooser as a flat toolbar strip, but the adopted code block kept its 16px top margin, leaving it detached from the toolbar above — the chooser card rules only reach code nested inside the chooser. Pull the first code block in an adopted language choosable flush to the toolbar so the two read as one connected panel. Scoped with `:not(pulumi-chooser *)` so the nested overview-card choosables, whose spacing the card rules already handle, are untouched. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * Move the code copy button to the upper-right corner, matching docs The registry had positioned the copy button inset from the corner (top/right: 20px, plus a margin). Match docs by pinning it flush to the top-right corner (top/right: 0, no margin), keeping the registry's padding and hover styling. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * Give the copy button an opaque bg and docs-matched padding Two tweaks to the code copy button: - Opaque violet-50 background on the container (in the light code theme) so it masks the code and scrollbar beneath it instead of letting them show through a transparent button; violet-100 on hover as before. - Match docs' sizing: 14px icon with padding 8px 8px 8px 10px on the button itself (the registry had shrunk it to 12px with tighter padding on the container), so it no longer reads smaller/cramped than docs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * Restyle chooser badges and add pythontoolchain choosable support Update badge styling to match the docs (mono, normal weight, tighter padding), clean up chooser toolbar SCSS, and handle the pythontoolchain selection type in the choosable component. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * Click language chooser tabs by short label in browser tests The chooser redesign renders language tabs with short labels (uppercased file extension, or an override like C#) instead of the full language name, which now lives in the toolbar label. Update the Cypress tests to click tabs by the new label so the per-language example/input assertions match. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * Address review: drop unrelated go.mod/C# logo changes, fix nit - Revert the stray go.mod indirect require for themes/default: no Go code in the root module imports it and there's no go.sum entry, so it was a spurious `go mod tidy` artifact unrelated to the chooser work. - Revert the logos/tech/{c-sharp,csharp}.svg swap: these files are not referenced anywhere in the registry, and the chooser uses a different icon (images/docs/icons/languages/csharp-color-32-32.svg), so the swap was unrelated scope creep with no visual effect. - Add the missing trailing semicolon on PreferencesState.pythontoolchain. Puppeteer stays at ^24: CI/mise Node is 24, which satisfies it. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * Delete unused C# tech logos logos/tech/c-sharp.svg and csharp.svg are referenced nowhere in the registry (the chooser uses images/docs/icons/languages/csharp-color-32-32.svg), so remove the dead assets rather than carry them. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>




In addition to updates to the language chooser to make it fit more languages more easily, this updates all code blocks in /docs to be theme-aware instead of always dark mode.
TBD: what icon to use for HCL when it's added, or consider if we want language icons at all.Follow up work: replicate these changes in the registry.
Resolves #19928.
Redesigns the language chooser into a bordered card with a left-label toolbar, and makes code blocks theme-aware in
/docs(a new Min Light theme for light mode alongside the existing Min Dark default).Changes
Language chooser redesign
type="language") in a bordered card with a gray toolbar: the active language's colored logo + full name on the left, underline-style abbreviation tabs (TS, PY, GO, …) on the right.logo(and optionallogoOnDark) field to eachSupportedLanguage; YAML ships a dark-mode wordmark variant swapped via the docs.docs-logo-light/.docs-logo-darkclasses.option-style="none") keep no chrome — the toolbar wrapper is hidden alongside the list.Theme-aware code blocks (/docs)
theme/src/scss/docs/_code-light.scss— the Min Light code theme (Violet 50 surface) for docs light mode, mirroring the Min Dark dark-mode block. Comments are bumped for contrast; everything else is the canonical Min Light palette.main.scssso it beats the layered component rules, scoped tohtml:not([data-theme="dark"]) body.section-docsso it can't touch non-docs pages or dark mode.Code-panel chrome refinements
code-mode-darkoverrides).div.icon-and-lineso it no longer leaks onto copy-button icons.Tests